import React, { useEffect, useState } from 'react';
import { Button, Col, DatePicker, Drawer, Form, Input, Row, Select, Space } from 'antd';
import dayjs from 'dayjs';
import { from } from 'stylis';
const { Option } = Select;

export interface UpdateFormValueType extends Partial<TeacherAPI.UpdateTeacherParam> {
  id?: number; // 自增主键
  // 教师ID
  teacherId: string;
  // 学生ID
  studentId: string;
  // 教室ID
  classroomId: string;
  // 课程类型
  courseType: string;
  // 科目
  major: string;
  // 上课时间
  startTime: Date;
  // 下课时间
  endTime: Date;
  // 消课数
  courseUsedCount: number;
  // 备注
  comment: string;
  version?: number; // 数据版本号
}

export interface FormProps {
  visible: boolean;
  values: UpdateFormValueType;
  onCancel: () => void;
  onSubmit: (values: UpdateFormValueType) => Promise<void>;
}

const App: React.FC<FormProps> = (props) => {

  const [form] = Form.useForm();

  form.setFieldsValue(props.values);

  return (
    <>
      <Drawer
        title={`${props.values.id} - ${props.values.name}`}
        width={720}
        onClose={() => props.onCancel()}
        open={props.visible}
        styles={{
          body: {
            paddingBottom: 80,
          },
        }}
        extra={
          <Space>
            <Button onClick={() => props.onCancel()}>取消</Button>
            <Button onClick={() => props.onSubmit(form.getFieldsValue())} type="primary">
              提交
            </Button>
          </Space>
        }
      >
        <Form
          layout="vertical"
          form={form}
        >
          <Form.Item
            name="id"
            hidden={true}
          >
            <Input value={props.values.id}/>
          </Form.Item>
          <Form.Item
            name="version"
            hidden={true}
          >
            <Input value={props.values.version}/>
          </Form.Item>
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                name="studentId"
                label="学生ID"
                rules={[{ required: true, message: '请输入会员卡号' }]}
              >
                <Input placeholder="请输入会员卡号" />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                name="teacherId"
                label="教师ID"
                rules={[{ required: true, message: '请输入会员卡号' }]}
              >
                <Input placeholder="请输入会员卡号" />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                name="classroomId"
                label="教室ID"
                rules={[{ required: true, message: '请输入会员卡号' }]}
              >
                <Input placeholder="请输入会员卡号" />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                name="courseType"
                label="课程类型"
                rules={[{ required: true, message: '请输入会员卡号' }]}
              >
                <Input placeholder="请输入会员卡号" />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                name="major"
                label="科目"
                rules={[{ required: true, message: '请输入会员卡号' }]}
              >
                <Input placeholder="请输入会员卡号" />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                name="startTime"
                label="上课时间"
                rules={[{ required: true, message: '请输入出生日期' }]}
              >
                <DatePicker
                  showTime
                  format="YYYY-MM-DD HH:mm:ss"
                  style={{ width: '100%' }}
                />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                name="endTime"
                label="下课时间"
                rules={[{ required: true, message: '请输入出生日期' }]}
              >
                <DatePicker
                  showTime
                  format="YYYY-MM-DD HH:mm:ss"
                  style={{ width: '100%' }}
                />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                name="courseUsedCount"
                label="划课数"
                rules={[{ required: true, message: '请输入会员卡号' }]}
              >
                <Input placeholder="请输入会员卡号" />
              </Form.Item>
            </Col>
            <Col span={24}>
              <Form.Item
                name="comment"
                label="备注"
              >
                <Input.TextArea rows={4} placeholder="请输入备注" />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Drawer>
    </>
  );
};

export default App;